<template>
  <view class="goods-group-wrap">
    <scroll-view class="scroll-goods" scroll-y @scrolltolower="onScrolltolower">
      <view class="list">
        <card-good
          class="card-good"
          v-for="(item, index) in list"
          :key="index"
          :probability="probability"
          @tap="onClickOperate($event, 'look', item.goods_id)"
          :details="item"
        ></card-good>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import CardGood from './card-good.vue';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(100);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { CardGood },
  props: {
    currentBox: {
      type: Object,
      default: () => ({}),
    },
    probability: {
      type: Boolean,
      default: false,
    },
    total: {
      type: [String, Number],
      default: 0,
    },
  },

  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {
    list() {
      return this.currentBox?.box_goods?.list || [];
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // look
          case 'look':
            this.lookDetailsMod(data);
            break;
        }
      });
    },
    // 滑动到底
    onScrolltolower() {},

    lookDetailsMod(ev) {
      this.$emit('look', ev);
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-group-wrap {
  position: relative;
  padding: 20rpx 18rpx;
  width: 100%;
  height: 700rpx;
  background-color: #fefafc;
  border-radius: 20rpx 20rpx 0 0;

  .scroll-goods {
    width: 100%;
    height: 100%;
    .list {
      display: grid;
      // 3是多少行列 后面 100px是列宽，行的设置同理
      grid-template-columns: repeat(3, 228rpx);
      grid-template-rows: repeat(3, 302rpx);
      // 行列间距
      column-gap: 16rpx;
      row-gap: 20rpx;
      width: 100%;
      min-height: 100%;
    }
  }
}
</style>
